import React, { useState, useEffect } from 'react'
import { Tabs, Popup } from 'react-vant';
import { useNavigate } from "react-router-dom"
import { ArrowLeft } from '@react-vant/icons';
import axios from "../uilst/axios"
type Props = {}

const Trainquery = (props: Props) => {
  const navigate = useNavigate()
  const items = ["5月5日", "5月6日", "5月7日", "5月8日", "5月9日", "5月10日", "5月11日", "5月12日", "5月13日",]
  const getstate: any = localStorage.getItem("address")
  const getstate1: any = localStorage.getItem("addresstow")
  const [list, setlist] = useState([])
  useEffect(() => {
    axios.get("/querylist").then(res => {
      setlist(res.data)
    })
  }, [])
  const [visible, setVisible] = useState(false)
  // 只看有票
  const have = () => {
    const arr = list.filter((item: any) => {
      return item.secondseat === '有票'
    })
    setlist(arr)
  }
  // 出发时间早-晚
  const renders = () => {
    axios.get("/querylist").then(res => {
      setlist(res.data)
    })
  }
  // 只看高铁
  const speeds = () => {
    const arr = list.filter((item: any) => {
      return item.state==='G'
    })
    setlist(arr)
  }
  return (
    <div className='trainquery'>
      <header>
        <span onClick={() => navigate(-1)}><ArrowLeft /></span><span>{getstate} —— {getstate1}</span><span></span>
      </header>
      <main>
        <div className='demo-tabs'>
          <Tabs defaultActive={2}>
            {items.map((item, index) => (
              <Tabs.TabPane key={index} title={item}>
                {
                  list.map((v: any, i) => {

                    return <div className='allcon' key={i}>
                      <div className="citys"><span><b>{v.starttime}</b></span><span className='marginbottom'>{v.time}</span><span><b>{v.endtime}</b></span><span className='colors'><b> ￥{v.price}</b></span></div>
                      <div className="citys"><span>{getstate}</span><span>{v.train}</span><span>{getstate1}</span><span className={v.secondseat === '有票' ? 'colors2' : 'colors1'}>{v.secondseat}</span></div>
                      <div className={v.secondseat === '有票' ? 'citys' : ''}><span></span><span></span><span></span><span onClick={() => setVisible(true)}>{v.secondseat === '有票' ? '占座' : ''}</span></div>
                    </div>
                  })
                }
              </Tabs.TabPane>
            ))}
          </Tabs>
          <Popup visible={visible} onClose={() => setVisible(false)}>
            <div style={{ width: "200px", height: "200px" }}>内容</div>
          </Popup>
        </div>
      </main>
      <footer>
        <button onClick={renders}>出发时间早-晚</button>
        <button onClick={speeds}>只看高铁</button>
        <button onClick={have}>只看有票</button>
      </footer>
    </div>
  )
}

export default Trainquery